import { useEffect, useState, useContext } from 'react'
import style from './index.module.less'
import { delRequest } from './ajax'
import { awaitWrap, confirmAction } from '@src/assets/js/tool'
import { PDFSignSchema } from '@components/schema/pdf'
import { Button, List, message, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons'
import { SignContext } from '../../../../context'
import Modal from './components/modal'

async function delHandel (id: string, refreshFn: () => void) {
  const h = message.loading('删除中', 120)
  const [e] = await awaitWrap(delRequest(id))
  h()
  if (e === null) {
    refreshFn()
  }
}

interface Props {
  caseid: string
  fileid: string
  editable: boolean
}

function Main ({ fileid, caseid, editable }: Props) {
  const c = useContext(SignContext)
  const [modifyData, setModifyData] = useState<PDFSignSchema | null>(null)
  const [visible, setVisible] = useState(false)
  return (
    <div className={style.container}>
      <Modal caseid={caseid} documentid={fileid} data={modifyData} visible={visible} hide={() => { setModifyData(null); setVisible(false) }} refreshFn={() => c.initSignList()} />
      <List dataSource={c.signList} loading={c.signLoading} renderItem={(item, i) => {
        return (
          <div className={style.item} key={i}>
            <div className={style['item-line']}>
              <span className={style['item-line-cell']}>仲裁员：{item.name}</span>
              <span className={style['item-line-cell']}>手机号：{item.mobile}</span>
            </div>
            <div className={style['item-line']}>
              <span className={style['item-line-cell']}>证件号：{item.license}</span>
              <span className={style['item-operate']}>
                {
                  editable && (
                    <Space>
                      <a className={style['item-del']} onClick={() => confirmAction(`您确定要删除 ${item.name} 吗？`, () => {
                        delHandel(item.id, () => c.initSignList())
                      })}>删除</a>
                    </Space>
                  )
                }
              </span>
            </div>
          </div>
        )
      }} />
      <div>
        {editable && <Button block icon={<PlusOutlined />} onClick={() => { setModifyData(null); setVisible(true) }}>添加签署人员</Button>}
      </div>
    </div>
  )
}

export default Main
